<template>
  <view>
    <view v-if="!user" class="flex align-center ml-3">
      <view class="flex align-center justify-center" style="'width: 180rpx;height: 180rpx; ">
        <image src="../../static/gift/5.png" mode="" style="width: 105rpx;height: 105rpx;"></image>
      </view>
      <view class="flex flex-column ml-2">
        <text class="font-md">未登录</text>
        <text class="font text-muted">登录体验更多功能</text>
      </view>

      <view class="ml-auto mr-3">
        <view class="border border-main rounded flex align-center justify-center p-2" hover-class="bg-light"
          @click="openLogin">
          <text class="text-main font">立即登录</text>
        </view>
      </view>
    </view>
    <view v-else class="flex align-center ml-3">
      <view class="flex align-center justify-center" style="'width: 180rpx;height: 180rpx; ">
        <image :src="user.avavtar || '../../static/gift/5.png'" mode="" style="width: 105rpx;height: 105rpx;"></image>
      </view>
      <view class="flex flex-column ml-2">
        <text class="font-md">{{user.username}}</text>
      </view>

      <view class="ml-auto mr-3">
        <view class="border border-main rounded flex align-center justify-center p-2">
          <text class="text-main font">编辑资料</text>
        </view>
      </view>
    </view>

    <view class="f-divider"></view>

    <f-list-item icon="icon-bizhongguanli" title="我的金币" :showRight="false" @click="authJump({url:'/pages/coin/coin'})">
      <text class="text-muted font">{{user ?  user.coin : 0}}金币 立即领取</text>
    </f-list-item>

    <f-list-item icon="icon-bofang" title="我的直播">
      <text class="text-muted font">0 </text>
    </f-list-item>
    <f-list-item icon="icon-shoucang" title="我的关注">
      <text class="text-muted font">0 </text>
    </f-list-item>
    <f-list-item icon="icon-lishi" title="历史记录">
      <text class="text-muted font">0 </text>
    </f-list-item>
  </view>
</template>

<script>
import fListItem from "@/components/common/f-list-item.vue";
import { mapState } from "vuex";
export default {
  components: {
    fListItem,
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      user: (state) => state.user,
    }),
  },
  onShow() {
    this.$store.dispatch("getUserInfo");
  },
  onNavigationBarButtonTap() {
    this.authJump({ url: "/pages/user-set/user-set" });
  },
  methods: {
    openLogin() {
      uni.navigateTo({
        url: "../login/login",
      });
    },
  },
};
</script>

<style>
</style>
